<template>
  <div>
    <el-card>
      <el-table :data="skuList" border stripe>
        <el-table-column label="序号" align="center" type="index" width="80"></el-table-column>
        <el-table-column label="名称" prop="skuName"></el-table-column>
        <el-table-column label="描述" prop="skuDesc"></el-table-column>
        <el-table-column label="默认图片">
          <template v-slot="{row,$index}">
            <el-image :src="row.skuDefaultImg" style="width: 100px;height: 100px;"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="重量(kg)" prop="weight"></el-table-column>
        <el-table-column label="价格(元)" prop="price"></el-table-column>
        <el-table-column label="操作" width="250" align="center">
          <template v-slot="{row,$index}">
            <el-button v-if="row.isSale===1" type="success" size="small" icon="ele-Top" title="下架"
              @click="cancleSale(row)"></el-button>
            <el-button v-if="row.isSale===0" type="info" size="small" icon="ele-Bottom" title="上架"
              @click="onSale(row)"></el-button>
            <el-button type="warning" size="small" icon="ele-Edit" title="修改sku" @click=""></el-button>
            <el-button type="info" size="small" icon="ele-InfoFilled" title="查看sku详情" @click="updateSku(row)"></el-button>
            <el-button type="danger" size="small" icon="ele-Delete" title="删除" @click="deleteSku(row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <!-- @size-change="handleSizeChange" @current-change="handleCurrentChange" -->
      <el-pagination v-model:current-page="page" v-model:page-size="limit" layout="prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script  lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "Sku",
});
</script>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import skuApi, { type SkuData } from "@/api/sku";
import { ElMessage } from "element-plus";

const page = ref(1);
const limit = ref(10);
const total = ref(0);
const skuList = ref<SkuData[]>([]);
const getSkuPageList = async (pager = 1) => {
  page.value = pager;
  try {
    const result = await skuApi.getPageList(page.value, limit.value);
    // console.log(result);
    skuList.value = result.records;
    total.value = result.total;
  } catch (error) {
    ElMessage.error("请求获取sku分页列表失败");
  }
};
onMounted(() => {
  getSkuPageList();
});

// 上架和下架
const cancleSale = async (row: SkuData) => {
  try {
    await skuApi.cancelSale(row.id as number);
    ElMessage.success("下架成功");
    getSkuPageList()
  } catch (error) {
    ElMessage.error("下架失败");
  }
};
const onSale = async (row: SkuData) => {
  try {
    await skuApi.onSale(row.id as number);
    ElMessage.success("上架成功");
    getSkuPageList()
  } catch (error) {
    ElMessage.error("上架失败");
  }
};
const updateSku=(row:SkuData)=>{
  ElMessage.error('正在开发中……')
}
const deleteSku=async (row:SkuData)=>{
  try {
    await skuApi.deleteSku(row.id as number)
    ElMessage.success('删除sku成功')
    getSkuPageList()
  } catch (error) {
    ElMessage.error('删除sku失败')
  }
}
</script>

<style lang="scss" scoped>
</style>